<template>
    <!-- 港区自然资源能源化评估 -->
    <div class="natural" @click="closePort">
        <div class="top-bar">
            <div class="title flex ">港区自然资源能源化评估：<el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                    placement="bottom-end" width="200" trigger="click"
                    content="港区自然资源禀赋能源化综合评估主要包括太阳能辐照强度评估、风能量评估、光伏电站发电量评估、风能电站发电量评估、光伏电站经济性评估、风能电站经济性评估、光伏电站碳减排量评估、风能电站碳减排量评估和风、光组合发电策略评估。">
                    <img class="pop-img" slot="reference" src="@/assets/wenhao.png" alt="">
                </el-popover></div>
            <div class="search-box flex-al-center">
                <div class="s-title">选定目标港区：</div>
                <div class="input pointer" @click.stop="openPort">
                    <input type="text" v-model="port" disabled style="width:310px" placeholder="请选择目标港区名称">
                    <div class="result" v-if="showPort">
                        <div class="r-li pointer" v-for="(item, index) in portList" :key="index"
                            @click="getPort(item, index)">
                            {{ item }}
                        </div>
                    </div>
                    <img src="@/assets/arrow-down.png" :class="{ transform: showPort }" alt="">
                </div>
                <div class="btn pointer">搜索</div>
            </div>
        </div>
        <div class="content flex_bet">
            <div class="left box">
                <div class="flex flex-al-center margin-b">
                    <div class="title flex-al-center">
                        光伏发电计算
                    </div>
                    <el-popover key="index1" :visible-arrow="false" popper-class="myClass" placement="bottom-end"
                        width="200" trigger="click"
                        content="太阳能资源禀赋潜力模型主要包括两部分：1、计算特定条件下光伏板的最大功率点，根据辐照强度和温度利用光伏板数值模型计算的到在此条件下的最大功率点，用此最大功率点除以辐照强度得到最终的光电转换效率；2、发电量的评估，基于第一步得到的最终光电转化效率，结合港区的主要影响因素带入到发电量的评估公式，最终得到太阳能发电量。">
                        <img class="pop-img" slot="reference" src="@/assets/wenhao.png" alt="">
                    </el-popover>
                </div>


                <div class="input-box flex">
                    <el-form :model="inputForm" status-icon ref="inputForm11" label-width="100px" class="demo-inputForm">
                        <div class="input">

                            <el-form-item label="光伏组件面积 /㎡" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '光伏组件面积不能为空' }]"
                                prop="photovoltaicPanelArea">
                                <el-input type="number" placeholder="请输入光伏组件面积"
                                    v-model="inputForm.photovoltaicPanelArea"></el-input>
                                <div class="detail-calc" @click="goLightCalc">详细计算</div>
                            </el-form-item>
                            <el-form-item key="item1" label="光伏组件光电转换效率 /%" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '光伏组件光电转换效率不能为空' }]"
                                prop="photoelectricConversionEfficiency">
                                <el-input type="number"
                                    :placeholder="holderList[portIndex].photoelectricConversionEfficiency || '请输入光电转换效率'"
                                    v-model="inputForm.photoelectricConversionEfficiency"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="计算特定条件下光伏组件的最大功率点，根据辐照强度和温度利用光伏组件数值模型计算的在此条件下的最大功率点，用此最大功率点除以辐照强度得到最终的光电转换效率。宁波舟山港建议取17.28%">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="遮荫系数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '遮荫系数不能为空' }]"
                                prop="shadingCoefficient">
                                <el-input type="number" :placeholder="holderList[portIndex].shadingCoefficient || '请输入遮荫系数'"
                                    v-model="inputForm.shadingCoefficient"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="遮荫条件主要考虑港区周围的土地类型、NDVI值和港区的大小。宁波舟山港建议取0.87">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="光伏组件单价 元/m²" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '光伏组件单价不能为空' }]" prop="unitPrice">
                                <el-input type="number" :placeholder="holderList[portIndex].unitPrice || '请输入光伏组件单价'"
                                    v-model="inputForm.unitPrice"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="光伏组件的单价，宁波舟山港建议取600元/m²">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="年平均维护成本 元/m²" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '年平均维护成本不能为空' }]"
                                prop="annualMaintenanceCosts">
                                <el-input type="number"
                                    :placeholder="holderList[portIndex].annualMaintenanceCosts || '请输入年平均维护成本'"
                                    v-model="inputForm.annualMaintenanceCosts"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="光伏组件年平均维护成本，宁波舟山港建议取45元/m²">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <!-- </el-form> -->
                        </div>
                        <div class="input">
                            <!-- <el-form :model="inputForm" status-icon ref="inputForm22" label-width="100px" class="demo-inputForm"> -->
                            <el-form-item label="使用年限" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '使用年限不能为空' }]" prop="serviceLife">
                                <el-input type="number" placeholder="请输入使用年限" v-model="inputForm.serviceLife"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="太阳能光伏组件实际使用时间">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="单位面积周期碳排放 kg/m²" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '单位面积周期碳排放不能为空' }]"
                                prop="cycleCarbonEmission">
                                <el-input type="number" placeholder="请输入单位面积周期碳排放"
                                    v-model="inputForm.cycleCarbonEmission"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="单位面积光伏组件在一年发电过程中的碳排放量，建议取值5.29kg/m²。单位是kg/m²">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="总水平辐照强度 kWh/m²" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '总水平辐照强度不能为空' }]"
                                prop="radiationIntensity">
                                <el-input type="number" :placeholder="'建议值' + holderList[portIndex].radiationIntensity"
                                    v-model="inputForm.radiationIntensity"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="水平面总辐射强度包括太阳的直射辐射强度与太阳散射辐射强度。太阳辐射强度影响光伏系统的发电量。宁波舟山港建议取1272kWh/m²">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="电器利用系数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '电器利用系数不能为空' }]"
                                prop="utilizationCoefficient">
                                <el-input type="number" placeholder="请输入电器利用系数"
                                    v-model="inputForm.utilizationCoefficient"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="光伏组件发电并入电网中会产生损耗，宁波舟山港建议取0.8">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="老化系数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '老化系数不能为空' }]" prop="agingCoefficient">
                                <el-input type="number" :placeholder="holderList[portIndex].agingCoefficient || '请输入老化系数'"
                                    v-model="inputForm.agingCoefficient"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="光伏组件在使用过程中会产生老化，影响发电效果。按内陆港与沿海港分。内陆港取0.99，沿海港取0.98。宁波舟山港建议取值0.98">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <!-- </el-form> -->
                        </div>
                        <div class="input">
                            <!-- <el-form :model="inputForm" status-icon ref="inputForm33" label-width="100px" class="demo-inputForm"> -->
                            <el-form-item label="工业电价 元/kWh" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '工业电价不能为空' }]" prop="electricityPrice">
                                <el-input type="number" :placeholder="holderList[portIndex].electricityPrice || '请输入工业电价'"
                                    v-model="inputForm.electricityPrice"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="该地的工业用电电价，宁波舟山港建议取0.725元/kWh">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="设计使用寿命 /年" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '设计使用寿命不能为空' }]" prop="designLife">
                                <el-input type="number" placeholder="请输入设计使用寿命" v-model="inputForm.designLife"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="光伏组件设计可用寿命，一般为25年">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="电网碳排放因子系数 tCO2/MWh" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '电网碳排放因子系数不能为空' }]"
                                prop="carbonEmissionFactor">
                                <el-input type="number" placeholder="请输入电网碳排放因子系数"
                                    v-model="inputForm.carbonEmissionFactor"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="中国发电过程中产生的碳排放因子为0.7921（tCO2/MWh），发电站建设过程中产生的碳排放因子为0.6889（tCO2/MWh），以0.75:0.25的权重得到宁波舟山港电网碳排放综合因子fe取0.7663（tCO2/MWh）。单位是tCO2/MWh">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <!-- </el-form> -->

                        </div>
                        <!-- <div class="flex btn-box">
                            <div class="calc-btn pointer" type="primary" @click="submitForm('inputForm')">计算</div>
                        </div> -->
                    </el-form>

                </div>
                <div class="flex btn-box2">
                    <div class="calc-btn pointer" type="primary" @click="submitForm('inputForm')">计算</div>
                </div>
            </div>
            <div class="right box">
                <div class="title">光伏发电评估结果</div>
                <div class="input" style="margin:0 0 40px 0">
                    <div>发电量/MWh</div>
                    <el-input type="number" v-model="lightRes.powerGeneration" />
                    <div>经济性/万元</div>
                    <el-input type="number" v-model="lightRes.economic" />
                    <div>碳排放/tCO2</div>
                    <el-input type="number" v-model="lightRes.carbonEmissions" />
                    <div>能源利用效率/%</div>
                    <el-input type="number" v-model="lightRes.energyUtilizationEfficiency" />
                </div>

            </div>
        </div>
        <div class="content flex_bet" style="padding:27px 0 0 0">
            <div class="left box">
                <div class="flex flex-al-center margin-b">
                    <div class="title flex-al-center">
                        风能发电计算
                    </div>
                    <el-popover key="index1" :visible-arrow="false" popper-class="myClass" placement="bottom-end"
                        width="200" trigger="click"
                        content="通过计算风机的额定功率、风机的等效满负荷小时数以及风场修正系数，可以得到风力发电潜力。结合风速模型，最终可以得到评估的风能发电量。">
                        <img class="pop-img" slot="reference" src="@/assets/wenhao.png" alt="">
                    </el-popover>
                </div>
                <div class="input-box flex">
                    <el-form :model="inputForm1" status-icon ref="inputForm22" label-width="100px" class="demo-inputForm">
                        <div class="input">

                            <el-form-item label="风机台数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '风机台数不能为空' }]"
                                prop="windTurbineNumber">
                                <el-input type="number" placeholder="请输入风机台数"
                                    v-model="inputForm1.windTurbineNumber"></el-input>
                                <div class="detail-calc" @click="goWindCalc">详细计算</div>
                            </el-form-item>
                            <el-form-item key="item1" label="风速 m/s" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '风速不能为空' }]" prop="windSpeed">
                                <el-input type="number" placeholder="请输入风速" v-model="inputForm1.windSpeed"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="用来计算等效满负荷小时数，请按照风机实际安装高度的风速填写。宁波舟山港一般建议取值7.26m/s。">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="风机单价 /万元" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '风机单价不能为空' }]" prop="unitPrice">
                                <el-input type="number" placeholder="请输入风机单价" v-model="inputForm1.unitPrice"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="单台风机的价格，单位是万元，建议取值400万元">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="计划营运寿命 /年" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '计划营运寿命不能为空' }]" prop="operatingLife">
                                <el-input type="number" placeholder="请输入计划营运寿命"
                                    v-model="inputForm1.operatingLife"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="风能电厂计划使用时长，单位是年">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="使用年限 /年" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '使用年限不能为空' }]"
                                prop="useFixedNumberOfYear">
                                <el-input type="number" placeholder="请输入使用年限"
                                    v-model="inputForm1.useFixedNumberOfYear"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="风能电厂实际使用时长，单位是年">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                        </div>
                        <div class="input" style="margin-right: 300px;">
                            <!-- <el-form :model="inputForm1" status-icon ref="inputForm55" label-width="100px"
                            class="demo-inputForm"> -->
                            <el-form-item label="风机额定功率 /kw" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '使风机额定功率不能为空' }]" prop="ratedPower">
                                <el-input type="number" placeholder="请输入风机额定功率" v-model="inputForm1.ratedPower"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click" content="风机额定功率，宁波港建议取2000kw">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="风场修正系数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '风场修正系数不能为空' }]"
                                prop="correctionFactor">
                                <el-input type="number" placeholder="请输入风场修正系数"
                                    v-model="inputForm1.correctionFactor"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="考虑土地利用系数、风能利用系数、叶片污染折减系数、风机老化折减系数四种因素的综合系数；宁波舟山港建议取0.8139">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="工业电价 元/kWh" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '工业电价不能为空' }]"
                                prop="industrialElectricityPrice">
                                <el-input type="number" placeholder="请输入工业电价"
                                    v-model="inputForm1.industrialElectricityPrice"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="该地的工业用电电价，宁波舟山港建议取0.725元/kWh">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="电网碳排放因子系数" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '电网碳排放因子系数不能为空' }]"
                                prop="carbonEmission">
                                <el-input type="number" placeholder="请输入电网碳排放因子系数"
                                    v-model="inputForm1.carbonEmission"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="中国发电过程中产生的碳排放因子为0.7921（tCO2/MWh），发电站建设过程中产生的碳排放因子为0.6889（tCO2/MWh），以0.75:0.25的权重得到宁波舟山港电网碳排放综合因子fe取0.7663（tCO2/MWh）。单位是tCO2/MWh">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                            <el-form-item label="风功率密度 W/m²" label-width="286"
                                :rules="[{ required: true, trigger: 'blur', message: '风功率密度不能为空' }]"
                                prop="windPowerDensity">
                                <el-input placeholder="请输入风功率密度" type="number"
                                    v-model="inputForm1.windPowerDensity"></el-input>
                                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                    placement="bottom-end" width="200" trigger="click"
                                    content="港区风功率密度（港区风能资源是够达到开发条件，10m高度处的风功率密度需大于150 W/m²），宁波舟山港建议取值274.4 W/m²">
                                    <img slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="flex btn-box2">
                    <div class="calc-btn pointer" type="primary" @click="submitForm2('inputForm2')">计算</div>
                </div>
            </div>
            <div class="right box">
                <div class="title">风能发电评估结果</div>
                <div class="input" style="margin:0 0 40px 0">
                    <div>发电量/MWh</div>
                    <el-input type="number" v-model="windRes.powerGeneration" />
                    <div>经济性/万元</div>
                    <el-input type="number" v-model="windRes.economic" />
                    <div>碳排放/tCO2</div>
                    <el-input type="number" v-model="windRes.carbonEmissions" />
                    <div>能源利用效率/%</div>
                    <el-input type="number" v-model="windRes.energyUtilizationEfficiency" />
                </div>

            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            showPort: false,
            port: "宁波舟山港",
            portIndex: 3,
            portList: ["阳逻港", "青岛港", "天津港", "宁波舟山港"],
            holderList: [
                { //阳逻港
                    radiationIntensity: 1239,
                    efficiency: 3.45,
                    burnIn: 49.42
                },
                { // 青岛港
                    radiationIntensity: 1451,
                    efficiency: 5.05,
                    burnIn: 149.53
                },
                { // 天津港
                    radiationIntensity: 1339,
                    efficiency: 4.66,
                    burnIn: 109.2
                },
                { // 宁波舟山港
                    radiationIntensity: 1272,
                    efficiency: 6.5,
                    burnIn: 274.4,
                    photoelectricConversionEfficiency: 17.28,
                    shadingCoefficient: 0.87,
                    unitPrice: 600,
                    annualMaintenanceCosts: 45,
                    // serviceLife:17.28,
                    cycleCarbonEmission: 5.29,
                    // utilizationCoefficient:17.28,
                    agingCoefficient: 0.98,
                    electricityPrice: 0.725,
                    // designLife:17.28,
                    // carbonEmissionFactor:"17.28",

                },
            ],

            // 风力发电
            windRes: {
                economic: '', // 经济性
                powerGeneration: '', // 发电量
                carbonEmissions: '', // 碳排放
                energyUtilizationEfficiency: '', // 能源利用效率
            },
            lightRes: {
                economic: '', // 经济性
                powerGeneration: '', // 发电量
                carbonEmissions: '', // 碳排放
                energyUtilizationEfficiency: '', // 能源利用效率
            },
            inputForm: {
                photovoltaicPanelArea: 0
            },
            inputForm1: {
                windTurbineNumber: 0, //风机数量
                windSpeed: 0.0, //风速（m/s）
                unitPrice: 0.0, //单价（万元）
                operatingLife: 0.0, //计划营运寿命（年）
                useFixedNumberOfYear: 0, //使用年限（年）
                ratedPower: 0.0, //额定功率(kw)
                correctionFactor: 0.0, //风场修正系数
                industrialElectricityPrice: 0.0, //工业电价（元/kWh）
                carbonEmission: 0.0, //电网碳排放因子系数（kgCO2/kWh）
                windPowerDensity: 0.0 //风功率密度（W/m2）
            },
        }
    },
    created() {
        this.inputForm = this.defaultList[3]
        console.log(212)
        this.inputForm1 = this.defaultList2[3]
    },
    activated() {
        this.maxYears && (this.inputForm.serviceLife = this.maxYears)
        this.maxYears && (this.inputForm1.useFixedNumberOfYear = this.maxYears)

        this.lightArea && (this.inputForm.photovoltaicPanelArea = this.lightArea * 1)
        console.log(this.inputForm)
        // this.$store.commit("updateLightArea",0)
        this.windEq && (this.inputForm1.windTurbineNumber = this.windEq)
        // this.$store.commit("updateWindEq",0)
    },
    methods: {
        submitForm() {
            this.$refs.inputForm11.validate((valid) => {
                if (valid) {
                    this.$store.commit("saveLight", this.inputForm)

                    let data = {
                        ...this.inputForm,
                        photoelectricConversionEfficiency: this.inputForm.photoelectricConversionEfficiency * 0.01
                    }
                    this.$api.calcLight(data).then(res => {
                        if (res.code === 200) {
                            this.$store.commit("saveLight", this.inputForm)
                            console.log(res.data)
                            this.lightRes = res.data
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitForm2() {
            this.$refs.inputForm22.validate((valid) => {
                if (valid) {
                    this.$store.commit("saveWind", this.inputForm1)

                    let data = {
                        ...this.inputForm1,
                        photoelectricConversionEfficiency: this.inputForm1.photoelectricConversionEfficiency * 0.01
                    }
                    this.$api.calcWind(data).then(res => {
                        if (res.code === 200) {
                            this.$store.commit("saveWind", this.inputForm1)
                            console.log(res.data)
                            this.windRes = res.data
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        goLightCalc() {
            this.$router.push("/lightCalc")
        },
        goWindCalc() {
            this.$router.push("/windCalc")
        },
        // 隐藏列表
        closePort() {
            this.showPort = false;
        },
        openPort() {
            this.showPort = !this.showPort;
        },
        getPort(item, index) {
            this.port = item
            this.portIndex = index
            this.inputForm = this.defaultList[index]
            this.inputForm1 = this.defaultList2[index]
        }
    }
}
</script>

<style lang="scss" scoped>
.natural {
    box-sizing: border-box;
    overflow: auto;
    background-color: #000C38;
    height: 90.7vh;
    padding: 27px;

}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 32px 35px;
}

.top-bar {
    padding: 27px;
    background: #172C69;
    border-radius: 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;
    }

    .search-box {
        .s-title {
            font-size: 27px;
            color: #E9EBF1;
        }

        .input {
            position: relative;
            border-radius: 5px;
            box-sizing: border-box;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            border-radius: 5px 0px 0px 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 1000;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
            }

            input {
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
            }
        }

        .btn {
            box-sizing: border-box;
            margin-right: 37px;
            padding: 9.5px 37px 9px;
            background: #2D57D2;
            border-top: 3px solid #2D57D2;
            border-bottom: 3px solid #2D57D2;
            border-radius: 0px 5px 5px 0px;
            font-size: 24px;
            line-height: 28px;
            color: #E9EBF1;
        }

        .border-r {
            border-radius: 5px;

        }
    }

}

.content {
    .left {
        width: 75vw;

        .btn-box2 {
            width: 100%;
            justify-content: flex-end;

            .calc-btn {
                width: 123px;
                padding: 10px;
                text-align: center;
                background: #2D57D2;
                border-radius: 5px 5px 5px 5px;
                font-size: 18px;
                color: #E9EBF1;
            }
        }

        .title {
            margin: 0 20px 0 0;
            justify-content: center;
            font-size: 32px;
            padding: 8px 0;
            border-radius: 8px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            background-image: linear-gradient(#2D57D2, #222222a4);
            width: 220px;
            text-align: center;
        }

        .input-box {
            justify-content: space-between;
            width: 100%;
        }

        .input {
            position: relative;

            // width: 500px;
            &:first-of-type {
                margin: 0 200px 0 0;
            }
        }

        .btn-box {
            margin: 30px 0 0 0;
            width: 100%;
            justify-content: flex-end;
            position: absolute;
            bottom: 0;

            .calc-btn {
                width: 123px;
                padding: 10px;
                text-align: center;
                background: #2D57D2;
                border-radius: 5px 5px 5px 5px;
                font-size: 18px;
                color: #E9EBF1;
            }
        }


    }

    .right {
        .title {
            font-size: 32px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #E9EBF1;
            margin: 0 0 103px 0;
        }

        .input {

            div {
                font-size: 18px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #E9EBF1;
                margin: 0 0 18px 0;
            }

            input {
                width: 240px;
                margin: 0 0 23px 0;
                border-radius: 5px 5px 5px 5px;
                color: #E9EBF1;
                background-color: transparent;
                height: 38px;
                border: 2px solid #2D57D2;
            }
        }
    }
}

::v-deep .el-form-item__label {
    color: #fff;
    font-size: 27px;
    font-weight: 400;
    text-align: left;

    &::before {
        color: #FF7D04 !important;
    }
}

::v-deep .el-input__inner {
    background-color: transparent;
    border: 2px solid #2D57D2;
    border-radius: 5px;
    color: #fff;
}


::v-deep .el-form-item__content {
    // display: flex;
    // align-items: center;
    position: relative;

    .el-input {
        width: 240px;
        height: 40px;
    }

    img {
        margin: 0 0 0 20px;
        cursor: pointer;
    }

    .detail-calc {
        position: absolute;
        display: inline-block;
        border-radius: 5px 5px 5px 5px;
        margin: 0 0 0 20px;
        width: 151px;
        height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        border: 2px solid #2D57D2;
    }
}

.demo-inputForm {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.margin-b {
    margin-bottom: 20px;
}

.pop-img{
    cursor: pointer;
}
</style>
  